<template>
  <Select v-bind="$attrs"
    class="i-select-shop"
    :style="{width: `${width}px`}"
    :max-tag-placeholder="maxTagPlaceholder"
          v-on="$listeners" >
    <Option v-for="item in shopList" :value="item.shopId" :key="item.shopId">{{ item.shopName }}</Option>
  </Select>
</template>

<script>
import { getShopList } from '@/api/system/store'
import errorCaptured from '@/libs/errorCaptured'
export default {
  name: 'iSelectShop',
  props: {
    getPai: {
      type: Boolean,
      default: true
    },
    permissionCode: {
      type: String,
      required: true
    },
    // value: [String, Array],
    merchantId: {
      type: String
    },
    width: {
      type: Number,
      default: 180
    },
    maxTagPlaceholder: {
      type: Function,
      default: (num) => {
        return '...'
      }
    }
  },
  data () {
    return {
      shopList: []
    }
  },
  created () {
    if (this.getPai) this.gitList()
  },
  methods: {
    async gitList () {
      const [err, res] = await errorCaptured(getShopList, {
        permissionCode: this.permissionCode, // 查看普通订单
        merchantId: this.merchantId || this.$store.state.user.merchantId, // 商户id
        offset: 0,
        limit: 9999
      })
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.shopList = res.data.data
      this.$emit('on-api-finish')
    }
  }
}
</script>

<style lang="less">
.i-select-shop {
  height: 35px;
  width: 210px;
  .ivu-select-selection {
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ivu-tag {
    max-width: 100px;
  }
}
</style>
